<template>
    <view class="remarks">
        <!--
        <view v-if="role > 0&&status<=2" class="add-btn" @click="addFuc">
            <view class="btn">
                <uni-icons style="vertical-align: 0.1rem;" color="#0091ff" size="13" type="plusempty" />添加记录
            </view>
        </view>
        -->
        <view class="remarks-list">
          <view class="empty" v-if="list.length == 0">
            <view class="img">
              <image src="@/static/images/default.png"></image>
            </view>
            <view class="text">- 暂无任何登记 -</view>
          </view>
          <view class="remarks-item-box" v-for="(item, index) in list" :key="item.id">
            <view class="remarks-item-icon">
              <image v-if="index === 0" src="@/static/images/maintain/maintainTime.png"></image>
              <view v-else class="icon-circle"></view>
            </view>
            <view class="remarks-item">
                <view class="remarks-item-head">
                    <view class="userinfo">
<!--                        <view class="user-head" :style="{ backgroundColor: '#0091ff' }">{{ (item.userName || -->
<!--            '').slice(-2) -->
<!--                            }}</view> -->
                        <text class="user-name">{{ item.userName || '' }}</text>
                        <text>{{ item.createTime }}</text>
                    </view>

                    <view class="edit-btns" v-if="item.userId == userinfo.user_id">
                        <view @click="editItem(item)" class="btn-item">
                          <image src="@/static/images/edit2.png" class="icon-edit"></image>
                        </view>
                        <!--
                        <view @click="removeItem(item)" class="btn-item" style="color:#E33636;"><uni-icons
                                style="vertical-align: 0.1rem;" color="#E33636" size="12" type="trash" />删除</view>
                        -->
                    </view>

                </view>

                <view class="remarks-item-content">
                    <view class="ric-label">
                        图片/视频
                    </view>
                    <view class="ric-files">
                        <view :class="['ric-files-item']" v-for="(it, idx) in item.errorImg" :key="idx">
                            <image @click="preViewFile(item.errorImg, idx)"
                                :src="it.type == 'image' ? it.url : it.img || '/static/images/video.png'"
                                :lazy-load="true" mode="aspectFill"></image>
                        </view>
                    </view>

                    <view class="ric-label">
                        原因
                    </view>
                    <view class="ric-text">{{ item.errorDesc || '-' }}</view>
                </view>

                <view class="remarks-item-time">{{ item.createTime }}<text v-if="index === 0">最后更新</text></view>

            </view>
          </view>
        </view>

      <!--   添加记录-S   -->
      <view class="bottom-btn-box" v-if="role > 0&&status<=2">
        <view class="bottom-btn"><button type="default" class="home-btn" @click.native="addFuc">添加记录</button></view>
      </view>
      <!--   添加记录-D   -->
        <remarkDialog :planId="planId" ref="remarkDialog" @addRecord="finishAddRecord" :show="showRecordEdit"
            @closed="showRecordEdit = false"></remarkDialog>
      <previewMedia ref="previewMedia"></previewMedia>
    </view>
</template>

<script>
import { mapState } from 'vuex';
import { getPlanLogs, removePlanLogs } from '@/apis/workOrder.js';
import remarkDialog from './components/remarkDialog.vue';
export default {
	components: { remarkDialog },
	props: {

	},
	watch: {

	},
	data() {
		return {
			status:'',
			role: 0,// 1有权限
			planId: '',
			showRecordEdit: false,
			list: []
		};
	},
	computed: {
		...mapState('user', ['userinfo'])
	},
	onLoad(opt) {
		this.planId = opt.planId;
		this.role = opt.role;
		this.status = opt.status;
		if (this.planId) {
			this.getPlanLogs();
		}
	},

	methods: {
		// 预览
		preViewFile(list, index) {
			console.log('预览照片', list, index);
			wx.previewMedia({
				sources: list,
				current: index,
			});
		},
		removeItem(item) {
			uni.showModal({
				title: '提示',
				content: '是否删除',
				success: (res) => {
					if (res.confirm) {
						removePlanLogs({
							ids: item.id
						}).then(() => {
							uni.showToast({ title: '删除成功', icon: 'none' });
							this.getPlanLogs();
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		editItem(item) {
			this.$refs['remarkDialog'].initData(item);
			this.showRecordEdit = true;
		},
		addFuc() {
			this.$refs['remarkDialog'].initData({});
			this.showRecordEdit = true;
		},
		finishAddRecord(res) {
			console.log(res);
			this.getPlanLogs();
		},
		getPlanLogs() {
			getPlanLogs({
				planId: this.planId
			}).then(res => {
				this.list = res.data;
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.remarks {
    width: 100%;
    min-height: 100vh;
    background-color: #f3f6f8;
}

.nonedata {
    font-size: 28rpx;
    color: #666;
    text-align: center;
    margin-top: 10%;
}

.add-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-end;
    padding: 20rpx 0;

    .btn {
        margin-right: 30rpx;
        color: #0091ff;
    }

    // display: flex;
    // width: 670rpx;
    // height: 70rpx; 
    // border-radius: 8rpx; 
    // justify-content: center;
    // align-items: center;
    // position: fixed;
    // z-index: 99;
    // bottom: 40rpx;
    // left: 40rpx;
    // background-color: #0091ff;
    // color: #fff;
}
.remarks-list{
  padding: 32rpx;
  &>.remarks-item-box:nth-last-child(1){
    .remarks-item-icon{
      padding-bottom: 0;
    }
    .remarks-item{
      padding-bottom: 0;
    }
  }
}
.remarks-item-box{
  display: flex;
  .remarks-item{
    width: 0;
    flex: 1;
    padding-bottom: 36rpx;
  }
  .remarks-item-icon{
    padding-top: 4rpx;
    width: 50rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 17rpx;
    position: relative;
    padding-right: 10rpx;
    box-sizing: border-box;
    &::after{
      content: "";
      display: block;
      width: 1px;
      height: 100%;
      background-color: #E9E9E9;
    }
    .icon-circle{
      position: absolute;
      top: 15rpx;
      left: 16rpx;
      margin: 0 auto;
      box-sizing: border-box;
      display: block;
      width: 12rpx;
      height: 12rpx;
      background: #0091ff;
      border-radius: 50%;
    }
    image{
      width: 32rpx;
      height: 32rpx;
      min-width: 32rpx;
    }
  }
}
.remarks-item {
    //width: 680rpx;
    //padding: 32rpx;
    border-radius: .3rem;
    //margin: 0 auto;
    //margin-bottom: 36rpx;
    color: #333;

    &-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 24rpx;
        .edit-btns {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            font-size: 26rpx;
            .btn-item {
                margin-left: 20rpx;
                color:#0091ff;
            }
        }

        .userinfo {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-size: 26rpx;
            color: #333333;
            font-weight: 700;
          .user-name{
            margin-right: 15rpx;
          }
            .user-head {
                width: 46rpx;
                height: 46rpx;
                color: #fff;
                background-color: #0091ff;
                border-radius: 50%;
                text-align: center;
                font-size: 18rpx;
                line-height: 42rpx;
                margin-right: 12rpx;
                overflow: hidden;
            }
        }

    }

    &-content {
        padding: 16rpx 32rpx;
        margin-top: 10rpx;
        //padding-top: 10rpx;
        background: #ffffff;
        border-radius: 4px;
        box-shadow: 0px 1px 9px 0px rgba(0,0,0,0.07);
      .ric-label {
            font-size: 26rpx;
            color: #666;
            //padding: 8rpx 0;
            margin-bottom: 8rpx;
        }

        .ric-text {
            font-size: 28rpx;
        }
    }

    &-time {
        font-size: 24rpx;
        color: #999;
        margin-top: 14rpx
    }
}

.ric-files {
    width: calc(100% + 50rpx);
    display: flex;
    flex-wrap: wrap;
    margin-left: -10rpx;
    padding-bottom: 24rpx;
    &-item {
        width: 112rpx;
        height: 112rpx;
        background: #f7f7f8;
        margin: 10rpx;
        position: relative;

        image {
            width: 100%;
            height: 100%;
        }

        .remove {
            width: 32rpx;
            height: 32rpx;
            background: #cccccc;
            border-radius: 50%;
            line-height: 31rpx;
            text-align: center;
            color: #fff;
            // font-size: 41rpx;
            position: absolute;
            top: -12rpx;
            right: -12rpx;
            z-index: 7;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    .add {
        text-align: center;
        font-size: 24rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #0091ff;

        image {
            width: 38rpx;
            height: 38rpx;
        }
    }
}
.empty {
  display: flex;
  align-items: center;
  justify-content: center;

  image {
    width: 64rpx;
    height: 64rpx;
  }

  height: 800rpx;
  flex-direction: column;
}
.bottom-btn-box {
  width: 100%;
  height: 100rpx;

  .bottom-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #eeeeee;
    padding: 0 14rpx;
    box-sizing: border-box;
    z-index: 2;
    background-color: #FFFFFF;

    .home-btn {
      flex: 1;
      width: 0;
      height: 75rpx;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #0091FF;
      border-radius: 4px;
      color: #FFFFFF;
    }
  }
}
.icon-edit{
  width: 32rpx;
  height: 32rpx;
  min-width: 32rpx;
  vertical-align: -0.1rem;
}
</style>
